<template>
  <div class="login">
    <div class="login-box">
      <div class="block">
        <el-carousel height="475px" style="width: 600px">
          <el-carousel-item v-for="img in imageList" :key="img.name">
            <img :src="img.src" alt="图片丢失了" style="width: 600px;height: 475px"/>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="login-form">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <div class="login-form-title">
            <img
                src="@/assets/jindowin_y.png"
                style="width: 149px; height: 38px"
                alt=""/>
          </div>
          <div class="login-buttons">
            <el-button
                :type="activeButton === 'admin' ? 'warning' : 'default'"
                @click="handleAdminClick"
                class="login-button"
            >
              管理员登录
            </el-button>
            <el-button
                :type="activeButton === 'user' ? 'warning' : 'default'"
                @click="handleUserClick"
                class="login-button"
            >
              用户登录
            </el-button>
          </div>
          <el-form-item prop="username">
            <el-input
                v-model="loginForm.username"
                type="text"
                auto-complete="off"
                placeholder="账号"
                prefix-icon="iconfont icon-icon-test35"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="密码"
                prefix-icon="iconfont icon-mima"
                @keyup.enter.native="handleLogin"/>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
                class="login-btn"
                type="primary"
                size="medium"
                style="width: 100%"
                @click.native.prevent="handleLogin('loginForm')">
              <span  v-if="!loading">登录</span>
              <span style="color: #FFFFFF" v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import axios from "axios";
import {Component, Vue} from "vue-property-decorator";
import {Form} from "element-ui";

@Component
export default class LoginForm extends Vue {

  loginForm: {
    username: string;
    password: string;
  } = {
    username: 'user',
    password: '123456',
  };

  loginRules = {
    username: [
      {
        required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error('请输入用户名'))
          } else {
            callback();
          }
        }
      }
    ],
    password: [
      {
        required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error('请输入密码'))
          } else if ((!/^[0-9A-Za-z]{6,20}$/.test(value))) {
            callback(new Error('6 - 20位密码，数字或字母，区分大小写'))
          } else {
            callback();
          }
        }
      }
    ],
  }

  imageList: Array<{ name: string; src: string }> = [
    {
      name: "foot1",
      src: require("@/assets/foots/20.jpg")
    },
    {
      name: "foot2",
      src: require("@/assets/foots/21.jpg")
    },
    {
      name: "foot3",
      src: require("@/assets/foots/22.jpg")
    },
    {
      name: "foot4",
      src: require("@/assets/foots/24.png")
    },
  ]

  handleAdminClick() {
    window.location.href = 'http://localhost:8888/#/login';
  }

  handleLogin(forName) {
    const data = {
      username: this.loginForm.username,
      password: this.loginForm.password,
    };

    (this.$refs[forName] as Form).validate((valid) => {
      if (valid) {
        axios.post('/api/user/login', data).then(res => {
          if (res.data.code === 1) {
            this.$message.success('登录成功');
            const token = res.data.data.token;
            sessionStorage.setItem('authentication', token);
            this.$router.push('/index');
          }
        }).catch(err => {
          this.$message.error(err.message);
        })
      }
    })
  }
}
</script>
<style scoped>
.login-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.login-button {
  width: 120px;
}

.el-button--warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
}

.el-button--warning:hover,
.el-button--warning:focus {
  background-color: #ffca2c;
  border-color: #ffca2c;
  color: #fff;
}

.el-button--default {
  background-color: #fff3cd;
  border-color: #fff3cd;
  color: #664d03;
}

.el-button--default:hover,
.el-button--default:focus {
  background-color: #ffe69c;
  border-color: #ffe69c;
  color: #664d03;
}
</style>
<style lang="scss">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}


.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  // background: #476dbe;
  background-color: #333;
}

.login-box {
  width: 1000px;
  height: 474.38px;
  border-radius: 8px;
  display: flex;

  img {
    width: 60%;
    height: auto;
  }
}

.title {
  margin: 0px auto 10px auto;
  text-align: left;
  color: #707070;
}

.login-form {
  background: #ffffff;
  width: 40%;
  border-radius: 0px 8px 8px 0px;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-form {
    width: 214px;
    height: 307px;
  }

  .el-form-item {
    margin-bottom: 30px;
  }

  .el-form-item.is-error .el-input__inner {
    border: 0 !important;
    border-bottom: 1px solid #fd7065 !important;
    background: #fff !important;
  }

  .input-icon {
    height: 32px;
    width: 18px;
    margin-left: -2px;
  }

  .el-input__inner {
    border: 0;
    border-bottom: 1px solid #e9e9e8;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    height: 32px;
    line-height: 32px;
  }

  .el-input__prefix {
    left: 0;
  }

  .el-input--prefix .el-input__inner {
    padding-left: 26px;
  }

  .el-input__inner::placeholder {
    color: #aeb5c4;
  }

  .el-form-item--medium .el-form-item__content {
    line-height: 32px;
  }

  .el-input--medium .el-input__icon {
    line-height: 32px;
  }
}

.login-btn {
  border-radius: 17px;
  padding: 11px 20px !important;
  margin-top: 10px;
  font-weight: 500;
  font-size: 12px;
  border: 0;
  font-weight: 500;
  color: #333333;
  // background: #09a57a;
  background-color: #FFC200;;

  &:hover,
  &:focus {
    // background: #09a57a;
    background-color: #FFC200;;
    color: #ffffff;
  }
}

.login-form-title {
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;

  .title-label {
    font-weight: 500;
    font-size: 20px;
    color: #333333;
    margin-left: 10px;
  }
}
</style>
